<template>
  <el-form :model="form" label-width="120px">
    <!-- <el-form-item label="一级菜单">
      <el-select v-model="form.menuTitle" placeholder="选择一级菜单会生产二级菜单">
        <el-option v-for="(item, index) in list" :key="index" :label="item.name" :value="item.id" />
      </el-select>
    </el-form-item> -->
    <el-form-item label="title">
      <el-input v-model="form.title" />
    </el-form-item>
    <el-form-item label="菜单名称">
      <el-input v-model="form.name" />
    </el-form-item>
    <el-form-item label="菜单图标">
      <el-input v-model="form.icon" />
    </el-form-item>
    <el-form-item label="菜单路径">
      <el-input v-model="form.path" />
    </el-form-item>

    <el-form-item label="菜单重定向">
      <el-input v-model="form.redirect" />
    </el-form-item>
    <el-form-item label="菜单排序">
      <el-input v-model="form.hidden" />
    </el-form-item>

    <el-form-item label="菜单状态">
      <el-switch v-model="form.status" />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSubmit">创建菜单</el-button>
      <!-- <el-button>退出</el-button> -->
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
  import { ref, onBeforeMount } from 'vue';
  import { menusStore } from '../index';
  import { ElMessage } from 'element-plus';
  // do not use same name with ref

  const props = {
    data: {
      type: Object,
      return: {},
    },
    select: {
      type: String,
      default: '',
    },
    list: {
      type: Object,
      return: {},
    },
  };

  const form: any = ref({
    title: '',
    name: '',
    icon: '',
    path: '',
    redirect: '',
    hidden: '',
    uid: '0',
    status: true,
    menuTitle: '',
  });
  onBeforeMount(() => {
    // if (props.select == '创建菜单') {
    //   console.log(123);
    // } else {
    form.value = props.data;
    // }
  });
  async function onSubmit() {
    const result: any = await menusStore.AddMenus(form);
    console.log(result);

    if (result.code == 200) {
      ElMessage({
        message: result.message,
        icon: 'success',
      });
      form.value = {
        title: '',
        name: '',
        icon: '',
        path: '',
        redirect: '',
        hidden: '',
        uid: '0',
        status: true,
      };
    }
  }
</script>
